<template>
  <div class="container">
    <el-dialog
      :title="dialog.dialogType === 'edit' ? '修改改账单' : '创建改账单'"
      :visible.sync="dialog.dialogVisible"
      width="500px"
      fullscreen
      center
      :lock-scroll="true"
      @close="hideDialog"
      @open="getData"
    >
      <div class="main">
        <div class="left">
          <div class="title">原账单</div>
          <el-form
            ref="form"
            :rules="rules"
            :model="formData1"
            label-width="100px"
            label-position="left"
          >
            <el-form-item label="供应商编码：">
              <p class="inps">
                {{ formData1.supplier ? formData1.supplier.code : "" }}
              </p>
            </el-form-item>
            <el-form-item label="供应商名称：">
              <p class="inps">
                {{ formData1.supplier ? formData1.supplier.name : "" }}
              </p>
            </el-form-item>
            <el-form-item label="配送中心编码：">
              <p class="inps">
                {{ formData1.rdc_code }}
              </p>
            </el-form-item>
            <el-form-item label="配送中心名称：">
              <p class="inps">
                {{ formData1.rdc_name }}
              </p>
            </el-form-item>
            <el-form-item label="采购员编码：">
              <p class="inps">
                {{ formData1.buyer_code }}
              </p>
            </el-form-item>
            <el-form-item label="采购员名称：">
              <p class="inps">
                {{ formData1.buyer }}
              </p>
            </el-form-item>
            <el-form-item label="金额：">
              <p class="inps">
                {{ formData1.amount }}
              </p>
            </el-form-item>
            <el-form-item label="数量：">
              <p class="inps">
                {{ formData1.goods_num }}
              </p>
            </el-form-item>
            <el-form-item label="单价：">
              <p class="inps">
                {{ formData1.goods_price }}
              </p>
            </el-form-item>
          </el-form>
        </div>
        <div class="right">
          <div class="title">改账单</div>
          <div class="search"></div>
          <el-form
            ref="form"
            :rules="rules"
            :model="formData"
            label-width="100px"
            label-position="left"
          >
            <el-form-item label="改账金额：">
              <p class="inps">
                {{ formData.amount }}
              </p>
            </el-form-item>
            <el-form-item label="改账数量：">
              <p class="inps">
                {{ formData.num }}
              </p>
            </el-form-item>
            <el-form-item label="改账单价：">
              <p class="inps">
                {{ formData.price }}
              </p>
            </el-form-item>
            <el-form-item label="改账件数：">
              <p class="inps">
                {{ formData.qty }}
              </p>
            </el-form-item>
            <el-form-item label="改账供应商：">
              <p class="inps">
                {{ supplierData.value }}
              </p>
            </el-form-item>
          </el-form>
          <div class="institution">
            <el-table :data="institutionList" border style="width: 1000px">
              <el-table-column align="center" prop="org_name" label="机构名称">
              </el-table-column>
              <el-table-column
                align="center"
                prop="org_amount"
                label="调整金额"
              >
              </el-table-column>
              <el-table-column align="center" prop="org_num" label="调整数量">
              </el-table-column>
              <el-table-column align="center" prop="org_qty" label="调整件数">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { Loading } from "element-ui";
import { readCorrect } from "@/api/changeAccount/changeAccount";

export default {
  props: {
    dialog: Object
  },
  data() {
    return {
      institutionList: [],
      formData1: {},
      formData: {
        amount: 0,
        num: 0,
        price: 0,
        qty: 0
      },
      rules: {},
      supplierData: {
        innerVisible: false,
        value: "",
        id: "",
        list: [],
        loading: false
      },
      
    };
  },
  created() {},
  methods: {
    getData() {
      let data = {
        id: this.dialog.id
      };
      readCorrect(data).then(res => {
        this.formData1 = res.data.correct.statement;

        this.formData = {
          amount: res.data.correct.amount,
          num: res.data.correct.num,
          price: res.data.correct.price,
          qty: res.data.correct.qty
        };
        this.supplierData.value = res.data.correct.supplier_name;
        this.supplierData.id = res.data.correct.supplier_id;
        this.institutionList = Object.values(res.data.correct.orglist);
      });
    },
    hideDialog() {
      this.institutionList = [];
      this.formData1 = {};
      this.formData = {
        amount: 0,
        num: 0,
        price: 0,
        qty: 0
      };
      this.supplierData = {
        innerVisible: false,
        value: "",
        id: "",
        list: [],
        loading: false
      };
     
      this.dialog.dialogVisible = false;
    },

    //取消
    cancel() {
      this.hideDialog();
    }
  }
};
</script>
<style scoped>
.main {
  display: flex;
  justify-content: space-around;
}
.main .inp {
  width: 400px;
}
.main .inps {
  padding: 0;
  border-radius: 4px;
  color: #606266;
  display: inline-block;
  height: 37px;
  line-height: 37px;
  padding: 0 15px;

  width: 400px;
  margin: 0;
}
.main .left {
  width: 45%;
}
.main .right {
  width: 45%;
}
.main .title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.search {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  height: 45px;
}
.search .searchName {
  width: 100px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
}
.search .searchInp {
  width: 250px;
  margin-right: 10px;
}
.el-form-item__content {
  height: 40px !important;
  overflow: hidden;
}
.el-form-item {
  margin-bottom: 15px !important;
  height: 40px !important;
  overflow: hidden;
}
.institution {
  width: 700px;
}
</style>
